<template>
  <f7-page>
    <f7-navbar back-link="Back" title="FAB Speed Dial" sliding></f7-navbar>

    <f7-fab-speed-dial>
      <f7-fab-actions>
        <f7-fab-action color="pink" @click="onActionClick">A</f7-fab-action>
        <f7-fab-action color="orange" @click="onActionClick">B</f7-fab-action>
        <f7-fab-action color="green" @click="onActionClick">C</f7-fab-action>
      </f7-fab-actions>
      <f7-fab>
        <f7-icon icon="icon-plus"></f7-icon>
        <f7-icon icon="icon-close"></f7-icon>
      </f7-fab>
    </f7-fab-speed-dial>

    <f7-block>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis autem necessitatibus, commodi nostrum ad, quod laudantium magnam facilis sed explicabo maiores aliquam, iure ipsam totam. Cum rerum facilis, eveniet temporibus.</p>
      <p>Blanditiis mollitia recusandae eius, repellat, vero nihil totam, asperiores voluptas vitae omnis sapiente. Optio recusandae impedit quae pariatur rem sed officia fugiat ipsum, ut esse ex delectus, provident. Error, fuga.</p>
      <p>Labore harum dignissimos obcaecati quae? In cum pariatur culpa delectus provident alias sed libero optio assumenda recusandae doloribus praesentium, natus, quaerat itaque consequuntur velit ipsam minus illo reiciendis rem quisquam.</p>
      <p>Necessitatibus aut optio consectetur quia illum praesentium culpa, alias aliquam accusantium, molestiae sapiente tenetur porro ipsum eligendi doloribus qui laudantium corporis ullam dolore. Illum, nostrum, eveniet? Explicabo quibusdam assumenda unde.</p>
      <p>Mollitia libero explicabo nemo id nesciunt blanditiis repellat sed alias ipsum saepe repellendus dolorum laborum molestias commodi quia temporibus error provident, vitae nihil eum corporis, voluptatum. Nobis quasi error porro?</p>
      <p>Perspiciatis illo veniam dolorem, dignissimos provident odio maiores sit voluptatem, commodi nostrum non quidem molestias rem dolores, magni odit omnis officiis? Quia impedit atque ut optio officiis, pariatur necessitatibus voluptatum.</p>
      <p>Eveniet officiis iure voluptatum, deserunt explicabo recusandae nemo aperiam dolorem quaerat sapiente. Quo facilis aspernatur fuga, fugit animi provident voluptas excepturi. Nihil deleniti, quisquam, ipsa eaque recusandae deserunt placeat iste!</p>
      <p>Rem, corporis doloremque porro neque incidunt sequi molestiae consectetur, mollitia repellendus, ipsa laborum omnis commodi similique. Nulla assumenda cumque distinctio saepe at voluptatem laudantium soluta, enim, perspiciatis, accusamus, non officia.</p>
      <p>Obcaecati odit libero dolor, quasi corporis, illum. Modi voluptatum, alias ea quia dolorem sapiente dolor qui nihil expedita fugiat provident omnis quidem explicabo vitae, non pariatur. Laudantium, explicabo, dolorem. Sunt.</p>
      <p>Expedita architecto, consectetur quo veniam, labore, optio aut illo quibusdam minus doloremque mollitia voluptate corrupti dolorum maxime repellendus a qui sunt omnis? Voluptas esse officia porro dicta officiis incidunt facilis!</p>
      <p>Nam aperiam pariatur quo repellat maiores voluptatibus, excepturi mollitia, dolores eveniet suscipit in a ex voluptas dignissimos soluta aspernatur eius quasi. Illum quis iusto dignissimos commodi sequi dolores non, laboriosam?</p>
      <p>Minima quas illum consectetur, id cumque odit dolor dolores tempora suscipit sapiente rem repudiandae, a veniam, non officiis facere, enim earum est. Rerum ullam consectetur, voluptatibus, dolor amet eligendi voluptatem?</p>
      <p>Eius ad earum, vero eos. Odit blanditiis explicabo maiores, sint facere qui adipisci temporibus officia rerum voluptatibus debitis. Veritatis tempore rem porro illum quasi aut eveniet molestiae modi, aliquam impedit!</p>
      <p>Aliquam suscipit sunt dolorum sapiente deleniti natus a beatae labore libero excepturi laudantium molestiae magni hic itaque officiis unde doloribus enim placeat nisi dolore, voluptas ipsum quaerat! Magnam, culpa, natus.</p>
      <p>Est quidem doloremque, tempore quam earum ipsa accusantium, suscipit quaerat vitae pariatur velit sit expedita atque. Doloribus magnam magni ab, autem aliquam veritatis! Perspiciatis, laboriosam provident, impedit saepe maxime aspernatur.</p>
      <p>Autem nihil voluptatem beatae deserunt distinctio ex ad maiores adipisci omnis et, sint quia eveniet expedita quis provident dolores? Sit ipsam saepe, consequuntur! Eos non amet mollitia nesciunt labore error.</p>
      <p>Esse voluptatum animi tempora voluptatem, quibusdam nobis tenetur, odio optio placeat, nesciunt praesentium consequuntur consequatur repellat alias porro! Enim veritatis nobis a aspernatur maiores nostrum praesentium, consequatur laudantium quos ratione.</p>
      <p>Adipisci amet, tempore, distinctio laboriosam nisi numquam earum, reprehenderit nesciunt esse quam illum, illo similique provident in a commodi dignissimos consectetur neque enim porro. Sint maiores pariatur ab iusto quo!</p>
      <p>Consectetur non, reprehenderit fuga, vitae pariatur est numquam mollitia eius ut at enim cumque. Sunt consequuntur aut, amet fuga! Omnis architecto autem necessitatibus voluptatem sunt minus quod quam laborum inventore.</p>
      <p>Error excepturi libero commodi, consequuntur molestiae facilis ea! Quod molestiae a voluptates ex maiores harum, aut reprehenderit repudiandae temporibus officiis, esse ratione est asperiores architecto nesciunt veritatis laudantium recusandae. Harum!</p>
    </f7-block>
  </f7-page>
</template>
<script>
  export default {
    methods: {
      onActionClick: function () {
        console.log('Dial action clicked!');
      }
    }
  }
</script>